<template>
    <div class="appraise" :class="{'is-h5': systemStyle != 5}" v-if="Object.keys(appraise).length > 0">
        <!--微信分享 这个地方好像不需要微信分享的东西-->
        <!--<wx-share-body v-if="shareBody && Object.keys(shareBody).length > 0" :shareBody="shareBody"></wx-share-body>-->
        <div class="full-height-wvideo positionR" v-if="isResultPage.toString() == 'true'">
            <!--<full-height-video :videoPropsMsg="testVideo"></full-height-video>-->
            <video-swiper-panorama :videoSwiperPanoramaPorps="videoSwiperPanorama"></video-swiper-panorama>
            <div class="appraise-title width-full" @click="appraiseShowFn" v-if="false">
                <div class="width-height-full">
                    <span class="top-line"></span>
                    #智估均价 巧夺豪礼#
                </div>
            </div>
        </div>
        <div class="appraise-wbox">
            <div v-if="systemStyle == 5">
                <div class="appraise-box width-height-full">
                    <!--<div class="height-top" @click="appraiseBoxHidden"></div>-->
                    <div class="appraise-cbox">
                        <div class="positionR">
                            <div class="top-text-wImg text-center">
                                <img class="top-text-img" :src="staticImageUrl('images/appraise/appraise_title.png')"
                                    alt="">
                            </div>
                            <div class="appraise-msg displayFlex justifyCtBwt positionR">
                                <span class="appraise-act-time"
                                    v-if="(appraise.actState == -1 || appraise.actState == -2 || appraise.actState == 1) && appraise.rewardRuleModel.startTime">{{getTime(appraise.rewardRuleModel.startTime,'yy.MM.dd hh:mm:ss').slice(0,-3)}}
                                    活动开始</span>
                                <span class="appraise-act-time"
                                    v-if="appraise.actState == 0">{{getTime(appraise.rewardRuleModel.endTime,'yy.MM.dd hh:mm:ss').slice(0,-3)}}
                                    开奖</span>
                                <span class="appraise-act-time"
                                    v-if="(appraise.actState == 2 || appraise.actState == 3) && appraise.rewardRuleModel.endTime">已结束</span>
                                <span class="appraise-act-rule" @click="actRule=true">活动规则</span>
                            </div>
                            <div class="swiper-box positionR">
                                <swiper-center-big v-if="swiperContent.list.length > 0"
                                    :SwiperContentProp="swiperContent" @changeIndex="swiperIndex"
                                    @clickSwiperItem="showBigSiper"></swiper-center-big>
                                <span class="discription-img"
                                    v-for="(swiperContentValue,swiperContentIndex) in swiperContent.list"
                                    v-if="showSwiperPrizeStep == swiperContentIndex">{{swiperContentValue.title}}</span>
                            </div>
                            <!--本期历史记录-->
                            <div class="current-history">
                                <prize-record
                                    v-if="Array.isArray(currentRecord.list) && currentRecord.list.length > 0 && appraise.actState == 2"
                                    @clickUserHeader="toUserCenter" :prizeRecordProp="currentRecord">
                                </prize-record>
                            </div>
                            <line-chart :lineChartProp="lineChart"
                                v-if="lineChart && Array.isArray(lineChart.list) && lineChart.list.length > 9">
                            </line-chart>
                            <div class="appraise-record positionRLCT">
                                <div class="displayFlex tab-list justifyCtBwt flex-algin-center">
                                    <span>
                                        <span class="select-item" @click="tabSelect(0)"
                                            :class="{'active':selectedRecordWay == 0}">估价记录</span>
                                        <span class="select-item" @click="tabSelect(1)"
                                            :class="{'active':selectedRecordWay == 1}">我的估价</span>
                                    </span>
                                    <span class="join-num">已参与人数:{{record.totalPerson}}</span>
                                </div>
                                <div class="record-box" v-if="selectedRecordWay == 0">
                                    <div class="chart-no-data displayFlex flexCenter"
                                        v-if="!Array.isArray(record.list) || (Array.isArray(record.list) && record.list.length == 0)">
                                        <p class="text-center">暂无估价记录</p>
                                    </div>
                                    <div v-else>
                                        <user-list @clickUserHeader="toUserCenter" :userProp="record"></user-list>
                                        <div class="width-full text-center"
                                            v-if="Array.isArray(record.list) && record.list.length > 3">
                                            <span class="appraise-check-more"
                                                @click="showMoreJoin(selectedRecordWay)">查看更多</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="record-box" v-else-if="selectedRecordWay == 1">
                                    <div class="chart-no-data displayFlex flexCenter"
                                        v-if="!Array.isArray(selfRecord.list) || (Array.isArray(selfRecord.list) && selfRecord.list.length == 0)">
                                        <p class="text-center">暂无估价记录</p>
                                    </div>
                                    <div v-else>
                                        <user-list @clickUserHeader="toUserCenter" :userProp="selfRecord"></user-list>
                                        <div class="width-full text-center"
                                            v-if="Array.isArray(selfRecord.list) && selfRecord.list.length > 3">
                                            <span class="appraise-check-more"
                                                @click="showMoreJoin(selectedRecordWay)">查看更多</span>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <!--往期历史记录-->
                            <prize-record @clickUserHeader="toUserCenter" @showHistoryRecord="showHistoryRecord"
                                v-if="Array.isArray(historyRecord.list) && historyRecord.list.length > 0"
                                :prizeRecordProp="historyRecord">
                            </prize-record>
                            <p class="bottom-text">
                                我是有底线的～
                            </p>
                            <div class="btns-wrap" ref="btnsWrap">
                                <div class="bottom-input-box" v-if="appraise.actState == 0">
                                    <day-hmsm v-if="appraise.actState != 2" class="width-full" @endTime="endTime"
                                        :timerProp="timer"></day-hmsm>
                                    <!--v-if="appraise.limitJoin"-->
                                    <div v-if="appraise.actState == 0">
                                        <input-appraise v-if="!appraise.limitJoin" :inputAppraiseProp="inputAppraise"
                                            ref="inputAppraise" @inputFocus="btnsWrapRelative"
                                            @doAppraise="joinAppraise">
                                        </input-appraise>
                                        <div v-else class="input-box displayFlex flexCenter activity-remind-btn"
                                            @click="shareFn">
                                            <span>分享再估一次</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="bottom-input-box"
                                    v-else-if="appraise.actState == -1 || appraise.actState == -2 || appraise.actState == 1">
                                    <day-hmsm class="width-full" @endTime="endTime" :timerProp="timer"></day-hmsm>
                                    <!--v-if="appraise.limitJoin"-->
                                    <div class="input-box displayFlex flexCenter activity-remind-btn"
                                        @click="actAppointmentInform">
                                        <span>{{isWarn ? '已设置提醒':'活动开始时提醒我'}}</span>
                                    </div>
                                </div>
                                <!--活动状态为2已结束-->
                                <div class="down-app-box" v-else-if="appraise.actState == 2">
                                    <div class="input-box displayFlex flexCenter activity-remind-btn"
                                        :class="{'disabled':appraise.received}" v-if="appraise.awarded"
                                        @click="getPrizeBtn">
                                        <!--已获奖，未领取-->
                                        <span v-if="!appraise.received">领取大奖</span>
                                        <span v-else>已领取奖品</span>
                                    </div>
                                    <div class="input-box displayFlex flexCenter activity-remind-btn" v-else
                                        @click="nextInform">
                                        <span>{{isWarn ? '已设置提醒':'下次有活动提醒我'}}</span>
                                    </div>
                                </div>
                                <div class="down-app-box" v-else-if="false">
                                    <div class="input-box displayFlex flexCenter activity-remind-btn "
                                        @click="toHaoKanHaoWan">
                                        <span>我要下载好看好玩APP</span>
                                    </div>
                                </div>
                            </div>
                            <div class='wrapMsg' style="width: 100%;height: 1px;"></div>
                            <div :style="{height: appraise.actState == 3 ? '0px' :'100px'}"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="cesi" v-else>
                <slide-bottom ref="appraiseBox" @closeSlideBottom="$emit('showAppraise')" @clickBord="clickBord"
                    v-if="appraiseShow" :class="{'appraise-show-height':systemStyle == 5}">
                    <div class="appraise-box width-height-full">
                        <scroller ref="myscroller">
                            <div class="appraise-cbox">
                                <div class="positionR">
                                    <div class="top-text-wImg text-center">
                                        <img class="top-text-img"
                                            :src="staticImageUrl('images/appraise/appraise_title.png')" alt="">
                                    </div>
                                    <div class="appraise-msg displayFlex justifyCtBwt positionR">
                                        <span class="appraise-act-time"
                                            v-if="(appraise.actState == -1 || appraise.actState == -2 || appraise.actState == 1) && appraise.rewardRuleModel.startTime">{{getTime(appraise.rewardRuleModel.startTime,'yy.MM.dd hh:mm:ss').slice(0,-3)}}
                                            活动开始</span>
                                        <span class="appraise-act-time"
                                            v-if="appraise.actState == 0">{{getTime(appraise.rewardRuleModel.endTime,'yy.MM.dd hh:mm:ss').slice(0,-3)}}
                                            开奖</span>
                                        <span class="appraise-act-time"
                                            v-if="(appraise.actState == 2 || appraise.actState == 3) && appraise.rewardRuleModel.endTime">已结束</span>
                                        <span class="appraise-act-rule" @click="actRule=true">活动规则</span>
                                    </div>
                                    <div class="swiper-box positionR">
                                        <swiper-center-big v-if="swiperContent.list.length > 0"
                                            :SwiperContentProp="swiperContent" @changeIndex="swiperIndex"
                                            @clickSwiperItem="showBigSiper"></swiper-center-big>
                                        <span class="discription-img"
                                            v-for="(swiperContentValue,swiperContentIndex) in swiperContent.list"
                                            v-if="showSwiperPrizeStep == swiperContentIndex">{{swiperContentValue.title}}</span>
                                    </div>
                                    <!--本期历史记录-->
                                    <div class="current-history">
                                        <prize-record
                                            v-if="Array.isArray(currentRecord.list) && currentRecord.list.length > 0 && appraise.actState == 2"
                                            @clickUserHeader="toUserCenter" :prizeRecordProp="currentRecord">
                                        </prize-record>
                                    </div>
                                    <line-chart :lineChartProp="lineChart"
                                        v-if="lineChart && Array.isArray(lineChart.list) && lineChart.list.length > 9">
                                    </line-chart>
                                    <div class="appraise-record positionRLCT">
                                        <div class="displayFlex tab-list justifyCtBwt flex-algin-center">
                                            <span>
                                                <span class="select-item" @click="tabSelect(0)"
                                                    :class="{'active':selectedRecordWay == 0}">估价记录</span>
                                                <span class="select-item" @click="tabSelect(1)"
                                                    :class="{'active':selectedRecordWay == 1}">我的估价</span>
                                            </span>
                                            <span class="join-num">已参与人数:{{record.totalPerson}}</span>
                                        </div>
                                        <div class="record-box" v-if="selectedRecordWay == 0">
                                            <div class="chart-no-data displayFlex flexCenter"
                                                v-if="!Array.isArray(record.list) || (Array.isArray(record.list) && record.list.length == 0)">
                                                <p class="text-center">暂无估价记录</p>
                                            </div>
                                            <div v-else>
                                                <user-list @clickUserHeader="toUserCenter" :userProp="record">
                                                </user-list>
                                                <div class="width-full text-center"
                                                    v-if="Array.isArray(record.list) && record.list.length > 3">
                                                    <span class="appraise-check-more"
                                                        @click="showMoreJoin(selectedRecordWay)">查看更多</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="record-box" v-else-if="selectedRecordWay == 1">
                                            <div class="chart-no-data displayFlex flexCenter"
                                                v-if="!Array.isArray(selfRecord.list) || (Array.isArray(selfRecord.list) && selfRecord.list.length == 0)">
                                                <p class="text-center">暂无估价记录</p>
                                            </div>
                                            <div v-else>
                                                <user-list @clickUserHeader="toUserCenter" :userProp="selfRecord">
                                                </user-list>
                                                <div class="width-full text-center"
                                                    v-if="Array.isArray(selfRecord.list) && selfRecord.list.length > 3">
                                                    <span class="appraise-check-more"
                                                        @click="showMoreJoin(selectedRecordWay)">查看更多</span>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                    <!--往期历史记录-->
                                    <prize-record @showHistoryRecord="showHistoryRecord" @clickUserHeader="toUserCenter"
                                        v-if="Array.isArray(historyRecord.list) && historyRecord.list.length > 0"
                                        :prizeRecordProp="historyRecord">
                                    </prize-record>
                                    <p class="bottom-text">
                                        我是有底线的～
                                    </p>
                                    <div class='wrapMsg' style="width: 100%;height: 1px;"></div>
                                    <div :style="{height: appraise.actState == 3 ? '0px' :'100px'}"></div>
                                </div>
                            </div>
                        </scroller>
                    </div>
                    <!-- 填写估价的窗口 -->
                    <div class="btns-wrap" ref="btnsWrap">
                        <div class="bottom-input-box" v-if="appraise.actState == 0">
                            <day-hmsm v-if="appraise.actState != 2" class="width-full" @endTime="endTime"
                                :timerProp="timer"></day-hmsm>
                            <!--v-if="appraise.limitJoin"-->
                            <div v-if="appraise.actState == 0">
                                <input-appraise v-if="!appraise.limitJoin" :inputAppraiseProp="inputAppraise"
                                    ref="inputAppraise" @inputFocus="btnsWrapRelative" @doAppraise="joinAppraise">
                                </input-appraise>
                                <div v-else class="input-box displayFlex flexCenter activity-remind-btn"
                                    @click="shareFn">
                                    <span>分享再估一次</span>
                                </div>
                            </div>
                        </div>
                        <div class="bottom-input-box"
                            v-else-if="appraise.actState == -1 || appraise.actState == -2 || appraise.actState == 1">
                            <day-hmsm class="width-full" @endTime="endTime" :timerProp="timer"></day-hmsm>
                            <!--v-if="appraise.limitJoin"-->
                            <div class="input-box displayFlex flexCenter activity-remind-btn"
                                @click="actAppointmentInform">
                                <span>{{isWarn ? '已设置提醒':'下次有活动提醒我'}}</span>
                            </div>
                        </div>
                        <!--活动状态为2已结束-->
                        <div class="down-app-box" v-else-if="appraise.actState == 2">
                            <div class="input-box displayFlex flexCenter activity-remind-btn"
                                :class="{'disabled':appraise.received}" v-if="appraise.awarded" @click="getPrizeBtn">
                                <!--已获奖，未领取-->
                                <span v-if="!appraise.received">领取大奖</span>
                                <span v-else>已领取奖品</span>
                            </div>
                            <div class="input-box displayFlex flexCenter activity-remind-btn" v-else
                                @click="nextInform">
                                <span>{{isWarn ? '已设置提醒':'下次有活动提醒我'}}</span>
                            </div>
                        </div>
                        <div class="down-app-box" v-else-if="false">
                            <div class="input-box displayFlex flexCenter activity-remind-btn " @click="toHaoKanHaoWan">
                                <span>我要下载好看好玩APP</span>
                            </div>
                        </div>
                    </div>
                </slide-bottom>
            </div>
        </div>

        <!--估价成功的弹窗-->
        <div class="success-alert-box">
            <success-alert v-if="successAlert.show" :appraiseSuccessProp="successAlert" @showShare="shareFn"
                @closeModule="successAlert.show = false">
            </success-alert>
        </div>
        <!--活动规则-->
        <div class="appraise-rule">
            <act-rule v-if="actRule" :ruleProp="ruleMsg" @closeRule="actRule=false"></act-rule>
        </div>
        <!--放大的预览轮播图-->
        <div class="full-height-swiper-wrap" v-if="swiperShow">
            <div class="positionR">
                <full-height-swiper :FHSwiperMsg="{imagesList:bigSwiperList,useSwiperPagination:true,closeBtn: true}"
                    @close="hideBigSiper" @clickSwiperItem="hideBigSiper"></full-height-swiper>
            </div>
        </div>
        <!--手机号码弹出框-->
        <div class="login-verify">
            <login-verify v-if="phoneVerify" ref="phoneVerify" :loginVerifyProp="loginVerify" @submit="submitPhone"
                @closePhoneAlert="phoneVerify=false"></login-verify>
        </div>
        <!--估价记录-->
        <div class="appraise-record-alert-box appraise-record-all" v-if="appraiseRecordAlertBox">
            <appraise-record-alert @closeModule="appraiseRecordAlertBox =false" @loadingMore="loadingMore"
                :userProp="reordAlert">
            </appraise-record-alert>
        </div>
        <!--我的估价-->
        <div class="appraise-record-alert-box" v-if="appraiseRecordAlertSelf">
            <appraise-record-alert @loadingMore="loadingMore" @closeModule="appraiseRecordAlertSelf =false"
                :userProp="selfReordAlert"></appraise-record-alert>
        </div>
        <!--记录-->
        <prize-record-alert class="appraise-prize-record" v-if="showHistoryRecordAlert"
            @loadingMore="initHistoryPrizeRecord" :prizeRecordAlertProp="historyRecordAlert"
            @closeModule="showHistoryRecordAlert=false">
        </prize-record-alert>
        <!--分享-->
        <div class="share-box">
            <v-share v-if="showShare" @clickFn="showShare = false"></v-share>
        </div>
        <!--侧边栏-->
        <div class="appraise-wshare" v-if="appraiseShow">
            <span class="appraise-share" @click="shareFn">
                <img src="../../../assets/images/appraise/appraise_share.png" alt="">
            </span>
            <span class="appraise-top" @click="appraiseToTop">
                <img src="../../../assets/images/appraise/appraise_top.png" alt="">
            </span>
        </div>
        <!--二维码-->
        <div class="static-img-alert-wrap">
            <static-img-alert @navagation="navagation" :rqCodeContentProp="appraiseCode"
                @closeCode="appraiseCode.show = false" v-if="appraiseCode.show"></static-img-alert>
        </div>
    </div>
</template>

<script>
import xtoken from '../../../x/xtoken'
import SwiperCenterBig from '../../../components/commonComponents/swiperComponent/SwiperCenterBig'
export default {
    name: "Appraise",
    props: {
        appraiseProp: Object,
    },
    data () {
        return {
            /*估价信息存放*/
            appraiseId: 0,
            swiperContent: {
                list: [],
            },
            inputAppraise: {},
            /*估价信息*/
            appraise: {
                // "actState": 0,                                                //----@活动状态
                // "remainTime": 19434686,                                       //----剩余时间
                // "limitJoin": false,                                          //----剩余时间
                // "validNum": 2,                                               //----剩余估价次数
                // "awarded": false,                                             //----是否获奖：活动结束后使用
                // "received": false,                                            //----是否已领奖，配合是否获奖一起使用
                // "storeId": 102,                                               //----店铺id
                // "bookNoticed": false,                                         //----是否已预约通知
                // "rule": '',                                               //----活动规则
                // "rewardRuleModel": {                                          //----奖励规则模型
                //     "startTime": 1564641454000,                               //----开始时间
                //     "endTime": 1567060654000,                                 //----结束时间
                //     "interactId": 321,                                        //----活动id
                //     "content": "测试估价",                                    // ----活动描述(估价为空)
                //     "mediaReward": false,                                     //----是否是视频奖励
                //     "mediaRewards": null,                                     //----视频奖励模型
                //     "answerReward": true,                                     //----是否答案奖励
                //     "answerRewardModels": [                                  //----答案奖励模型
                //         {
                //             "interactId": 321,
                //             "rewardLevel": 1,                                //----@奖励等级
                //             "awardType": 10,                                 //----@奖品类型
                //             "awardTitle": "测试估价",                         //----奖品标题
                //             "awardKey": 110,                                 //----奖品对应的key
                //             "awardNums": 0,                                  //----奖品数量
                //             "mediaType": 0,                                  //----奖品对应的多媒体信息
                //             "mediaContents": [
                //                 {
                //                     "url": "http://vjs.zencdn.net/v/oceans.mp4",
                //                     "size": [60.5, 200, 16]
                //                 }
                //             ],
                //             "poster": "https://xxx/1.jpg",
                //         },
                //         {
                //             "interactId": 321,
                //             "rewardLevel": 1,                                //----@奖励等级
                //             "awardType": 10,                                 //----@奖品类型
                //             "awardTitle": "测试估价",                         //----奖品标题
                //             "awardKey": 110,                                 //----奖品对应的key
                //             "awardNums": 0,                                  //----奖品数量
                //             "mediaType": 1,                                  //----奖品对应的多媒体信息
                //             "mediaContents": [
                //                 {
                //                     "url": "https://oss.pg.yibaotong.top/images/activity/circle/1023gift/bbd.png",
                //                     "size": [60.5, 200, 16]
                //                 },
                //             ],
                //             "poster": "https://xxx/1.jpg",
                //         },
                //     ]
                // }
            },
            /*估价展示*/
            appraiseShow: true,
            /*查看估价记录*/
            selectedRecordWay: 0,
            /*估价成功的弹出框*/
            successAlert: { show: false },
            /*手机号的弹框*/
            phoneVerify: false,
            /*当前显示那个奖等*/
            showSwiperPrizeStep: 0,
            /*活动规则是否显示*/
            actRule: false,
            /*历史估价记录是否显示*/
            showHistoryRecordAlert: false,
            // /*分享信息*/
            // shareBody:{},
            /*是否预约成功*/
            informSuccess: false,
            //手机号码弹出框的设置
            loginVerify: {
                title: '为方便中奖之后联系到您，请您填写手机号',
                isNeedPicker: false,
                needBodyOverHd: true,
                codeProps: { codeLength: 4, isNeedClearIcon: false },
                closeStyle: 'bottomBtn',
                buttonText: '确定'
            },
            /*活动时间*/
            timer: {
                needMs: false,
            },
            /*活动二维码*/
            appraiseCode: {},
            /*分享的蒙版*/
            showShare: false,
            /*往期估价记录*/
            historyRecord: {},
            historyRecordAlert: {},
            /*本期中奖记录*/
            currentRecord: {},
            /*参与记录和我的估价*/
            record: {},
            reordAlert: {},
            selfRecord: {},
            selfRecordAlert: {},
            /*活动规则*/
            ruleMsg: {},
            /*载体id*/
            carrierId: 0,
            swiperShow: false,
            appraiseRecordAlertBox: false,//估价记录的弹窗
            appraiseRecordAlertSelf: false,//我的估价
            /*嵌入系统类型*/
            systemStyle: 6,
            storeInfo: {},
            /*是否设置提醒*/
            isWarn: false,
            /*chartLine*/
            lineChart: {},
            bigSwiperList: [],
            /*是否为消息结果页面*/
            isResultPage: false,
            testVideo: {
                // loop: true,
                // videoUrl: 'http://vjs.zencdn.net/v/oceans.mp4',
                // poster:'https://oss.pg.yibaotong.top/images/activity/circle/1023gift/bbd.png',
                // autoplay: false,
            },
            videoSwiperPanorama: {
                mediaType: 0,/*0视屏,1图片,2全景图*/
                imagesList: [],
                videoUrl: '',
                imgUrl: '',
            }
        }
    },
    created () {
        this.systemStyle = this.$route.query && this.$route.query.ttn || 6; //0系统 1os零售 2商城h5 3os渠道 5好看好玩 6好看好玩h5 10珠宝易
        this.isResultPage = this.$route.query && this.$route.query.isResultPage || false;//是否为消息结果页面
    },
    beforeMount () {
        if (this.systemStyle == 5) {
            $('html,body,#app').css({ 'background-color': 'red!important' });
        }
    },
    mounted () {
        /*swiper出现的时候*/
        /*调用原声app的方法*/
        if (this.systemStyle == 5) {
            this.$store.commit('hkhwUserInfo');
            this.initAppraise();
            // this.initAppMethods();
        } else {
            /*初始化页面信息*/
            this.initAppraise();
        }
    },
    methods: {
        initLineChart () {
            let params = {
                carrierId: this.carrierId,
                appraiseId: this.appraiseId,
            }
            this.$store.dispatch('initLineChartApi', params).then((data) => {
                if (data.success) {
                    let tempObj = {};
                    let tempArray = [];
                    for (let value in data.result) {
                        tempObj = {
                            time: value,
                            chartValue: data.result[value],
                        }
                        tempArray.push(tempObj);
                    }
                    this.lineChart = {
                        list: tempArray
                    }
                } else if (data.errMsg) {
                    this.$root.$emit('toast', { msg: data.errMsg });
                } else {
                    this.$root.$emit('toast', { msg: '获取估价信息失败' });
                }
            })
        },
        /*初始化页面信息*/
        initAppraise () {
            let that = this;
            /*载体id 可能是推广id可能是媒体id*/
            if (this.systemStyle == 5) {
                this.carrierId = this.$route.params && this.$route.params.carrierId ? this.$route.params.carrierId : 0;
                this.appraiseId = this.$route.params && this.$route.params.appraiseId ? this.$route.params.appraiseId : 0;
            } else {
                this.carrierId = this.appraiseProp && this.appraiseProp.carrierId ? this.appraiseProp.carrierId : 0;
                this.appraiseId = this.appraiseProp && this.appraiseProp.actKey ? this.appraiseProp.actKey : 0;
            }
            // this.carrierId = this.$route.params && this.$route.params.carrierId ? this.$route.params.carrierId : 0;
            // this.appraiseId = this.$route.params && this.$route.params.appraiseId ? this.$route.params.appraiseId : 0;
            let params = {
                appraiseId: this.appraiseId,
                userId: this.userId,
                carrierId: this.carrierId,
            }
            this.$store.dispatch('initAppraiseApi', params).then((data) => {
                if (data.success) {
                    /*TODO 这里有数据的时候要放开*/
                    this.appraise = data.result;

                    // this.appraise.actState = 0;
                    // this.appraise.startTime = 1575289372000;
                    // this.appraise.endTime = 1576844570000;

                    // this.appraise.actState = 1;
                    // this.appraise.endTime = 1576844570000;
                    //
                    // this.appraise.actState = 2;
                    //
                    // //是否中奖
                    // this.appraise.awarded = true;
                    // this.appraise.received = false;
                    // this.appraise = Object.assign({},this.appraise);

                    this.inputAppraise = Object.assign({}, { time: this.appraise.validNum || 0 });
                    /*初始化历史估价记录*/
                    this.initHistoryPrizeRecord();
                    if (this.appraise.actState == 2) {
                        /*当期中奖记录*/
                        this.initCurPrizeRecord();
                    }
                    if (this.appraise.actState == 0 && this.isAndroid) {
                        window.onresize = function (e) {
                            var h = $(window).height();
                            if (that.isAndroid) {
                                if (h <= window.screen.availHeight / 2) {
                                    $('.wrapMsg')[0].scrollIntoView();
                                }
                            }
                        }
                    }
                    /*初始化估价记录*/
                    that.initRecord();
                    /*获取分享信息*/
                    // this.getShareBody();
                    /*初始化swiper*/
                    that.initSwiper();
                    /*初始化活动倒计时*/
                    that.initActTime();
                    /*初始化活动规则*/
                    that.initRule();
                    /*初始化估价走势图*/
                    that.initLineChart();
                } else if (data.errMsg) {
                    this.$root.$emit('toast', { msg: data.errMsg });
                } else {
                    this.$root.$emit('toast', { msg: '获取估价信息失败' });
                }
            })
        },
        btnsWrapRelative (isFucus) {
            // let positionValue = 'static ';
            let that = this;
            if (!isFucus) {
                // positionValue = 'static';
            }
            if (this.isIphone) {
                let i = 0;
                // that.$refs.btnsWrap.style.position = positionValue;
                let timer = setInterval(function () {
                    if (i <= 10) {
                        document.body.scrollTop = document.body.scrollHeight;
                        i++
                    } else {
                        clearInterval(timer);
                    }
                }, 10)
            } else {
                // document.getElementsByClassName('_v-content')[0].style.transform = 'translate3d(0px, 667px, 0px) scale(1)'
            }
        },
        /*初始化swiper组件信息*/
        initSwiper () {
            let that = this;
            let tempObj = {};
            that.swiperContent.list = [];
            if (that.appraise.rewardRuleModel && that.appraise.rewardRuleModel.answerRewardModels && that.appraise.rewardRuleModel.answerRewardModels.length > 0) {
                that.appraise.rewardRuleModel.answerRewardModels.forEach((answerValue, index) => {
                    if (answerValue.mediaContents && answerValue.mediaContents.length > 0) {
                        tempObj = {
                            mediaType: answerValue.mediaType,
                            url: answerValue.mediaContents[0].url,
                            mark: that.prizeStep(answerValue.rewardLevel),
                            poster: answerValue.poster,
                            title: answerValue.awardTitle,
                            index: index,
                        };
                        that.swiperContent.list.push(tempObj);
                    }
                });
            }
        },
        /*初始化活动时间*/
        initActTime () {
            let data = this.appraise;
            let startTime = data.rewardRuleModel.startTime || 0;
            let endTime = data.rewardRuleModel.endTime || 0;
            let tempObj = {};
            let nowDate = Date.parse(new Date());
            // console.log(this.getTime(startTime, 'yy-MM-dd hh:mm:ss'), '开始时间');
            // console.log(this.getTime(nowDate, 'yy-MM-dd hh:mm:ss'), '现在时间');
            switch (data.actState) {
                case -2:
                    tempObj = {
                        actState: -2,
                        description: "距离活动开启还有",
                        expStartTime: startTime - nowDate > 0 ? startTime - nowDate : 0,
                    };
                    break;//预热中
                case -1:
                    tempObj = {
                        actState: -1,
                        description: "距离活动开启还有",
                        expStartTime: startTime - nowDate > 0 ? startTime - nowDate : 0,
                    };
                    break;//推广中
                case 0:
                    tempObj = {
                        actState: 0,
                        description: "距离活动结束还有",
                        expStartTime: endTime - nowDate > 0 ? endTime - nowDate : 0,
                    };
                    break;//进行中
                case 1:
                    tempObj = {
                        actState: 1,
                        description: "距离活动开启还有",
                        expStartTime: startTime - nowDate > 0 ? startTime - nowDate : 0,

                    };
                    break;//未开始
                case 2:
                    tempObj = {
                        actState: 2,
                        description: "活动已结束",
                        expStartTime: 0,
                    };
                    break;//已结束
                case 3:
                    tempObj = {
                        actState: 3,
                        description: "活动已结束",
                        expStartTime: 0,
                    };
                    break;//已取消
                default:
                    break;
            }
            this.timer = Object.assign({}, this.timer, tempObj);
        },
        /*初始化活动规则*/
        initRule () {
            /*'玩家输入数字即可参与估价活动，确认要估的数字后不可修改<br />' +
                    '2.每成功分享给一个好友可增加一次估价机会，分享人数不限<br />' +
                    '3.所估数字最接近所有人估算的平均数（去掉10%最高数和10%最低数）的用户，则获得奖品。若同时出现多位，则按时间计算最先估价的用户获胜。\n',*/
            this.ruleMsg = {
                isNeedBtn: false,
                rule: this.appraise.rule,
                addPoint: false,
                isScorll: true,
            }
            this.ruleMsg = Object.assign({}, this.ruleMsg)
        },
        /*获取码*/
        initCode () {
            let storeId = this.appraise.storeId;
            let params = {
                userId: this.userId,
                contentType: 61,
                params: {
                    "userId": this.userId,
                    "actType": 5,                                             //----@活动类型
                    "subActType": 5,                                          //----@子活动类型
                    "actKey": this.appraiseId,                                            //----活动id
                    "storeId": storeId,                                       //----店铺id
                }
            }
            this.$store.dispatch('initCodeApi', params).then((data) => {
                if (data.success) {
                    /*获取店铺信息*/
                    this.$store.dispatch('getStoreInfoApi', storeId).then((storeInfo) => {
                        if (storeInfo.success) {
                            this.storeInfo = storeInfo.result;
                            let tempObj = {
                                show: true,
                                imgType: 'rqcode',//rqcode
                                code: {
                                    img: '',
                                    url: data.result.content,
                                    width: 160,
                                    height: 160,
                                },
                                btn: `<span style="color: #fff;display: inline-block;font-size: 16px;"><img style="width:20px;position: relative;top: 4px;" src="${this.staticImageUrl('images/appraise/navigation_icon.png')}" alt="">导航</span>`,
                                topText: '到店请出示二维码领取奖品',
                                conterImg: 'https://r.yibaotong.top/html/v_nw_h5_min/images/app_download_logo.png',
                                copyContent: {
                                    pTitle1: '商家名称',
                                    p1Content: storeInfo.result.name,
                                    pTitle2: '商家地址',
                                    p2Content: storeInfo.result.location,
                                    text: '复制地址',
                                },
                            }
                            this.appraiseCode = Object.assign({}, this.appraiseCode, tempObj);
                        } else if (data.errMsg) {
                            this.$root.$emit('toast', { msg: data.errMsg });
                        } else {
                            this.$root.$emit('toast', { msg: '获取店铺信息失败' });
                        }
                    })
                } else if (data.errMsg) {
                    this.$root.$emit('toast', { msg: data.errMsg });
                } else {
                    this.$root.$emit('toast', { msg: '获取中间二维码失败' });
                }
            })
        },
        /*改变奖等信息*/
        prizeStep (num) {
            switch (num) {
                case 0: return '特等奖'; break;
                case 1: return '一等奖'; break;
                case 2: return '二等奖'; break;
                case 3: return '三等奖'; break;
                case 4: return '四等奖'; break;
                case 5: return '五等奖'; break;
                case 9: return '幸运奖'; break;
            }
        },
        /*swiper记录swiper当前显示那个奖等*/
        swiperIndex (index) {
            this.showSwiperPrizeStep = index;
            //关闭掉视频播放

        },
        /*往期中奖记录初始化*/
        initHistoryPrizeRecord (obj) {
            let that = this
            let storeId = this.appraise.storeId;
            let userId = this.userId;
            let querys = {};
            /*如果活动结束就是当期，如果活动没有结束就是往期*/
            querys = {
                interactType: 5,
                interactId: this.appraiseId,
                pageSize: 10,
                pageNum: obj && obj.curPage ? obj.curPage : 1,
            }
            let params = {
                storeId,
                userId
            }
            if (obj && obj.loadMore) {
                querys = Object.assign({}, querys, { pageNum: obj.curPage + 1 })
            } else {
                querys = Object.assign({}, querys, { pageNum: 1 })
            }
            this.$store.dispatch('initHistoryPrizeRecordApi', { querys, params }).then((data) => {
                if (data.success) {
                    let tempData = {
                        curPage: data.curPage || 1,
                        list: [],
                        totalPages: data.totalPages || 1,
                        id: 3,
                    };
                    if (obj && obj.loadMore) {
                        tempData.list = this.historyRecordAlert.list;
                        tempData.list.push(...data.list);
                        this.historyRecordAlert = Object.assign({}, tempData);
                    } else {
                        if (Array.isArray(data.list) && data.list) {
                            let tempHistoryRecordList = {
                                list: data.list,
                                isCurrent: false,
                            };
                            this.historyRecord = Object.assign({}, tempData, tempHistoryRecordList);
                            this.historyRecordAlert = Object.assign({}, tempData, tempHistoryRecordList);
                        }
                    }
                    // this.historyRecord = data;
                } else if (data.errMsg) {
                    this.$root.$emit('toast', { msg: data.errMsg });
                } else {
                    this.$root.$emit('toast', { msg: '获取往期中奖记录失败' });
                }
            })
        },
        /*当期记录初始化*/
        initCurPrizeRecord () {
            let that = this;
            let storeId = this.appraise.storeId;
            let userId = this.userId;
            /*如果活动结束就是当期，如果活动没有结束就是往期*/
            let params = {
                userId,
                appraiseId: this.appraiseId
            }
            this.$store.dispatch('initCurPrizeRecordApi', params).then((data) => {
                if (data.success) {
                    let tempData = {
                        curPage: data.curPage || 1,
                        list: [],
                        totalPages: data.totalPages || 1,
                        id: 3,
                    };
                    if (data.result) {
                        let tempCurrentRecordList = {
                            list: [data.result],
                            isCurrent: true,
                        };
                        this.currentRecord = Object.assign({}, tempData, tempCurrentRecordList);
                    }

                } else if (data.errMsg) {
                    this.$root.$emit('toast', { msg: data.errMsg });
                } else {
                    this.$root.$emit('toast', { msg: '获取往期中奖记录失败' });
                }
            })
        },
        /*别人的估价记录*/
        initRecord (obj) {
            let that = this;
            let storeId = this.appraise.storeId;
            let userId = this.userId;
            let nowTime = Date.parse(new Date());
            let pageSize = 10;
            let pageNum = 1;
            if (obj && obj.loadMore) {
                pageSize = obj.pageSize || 10;
                pageNum = obj.pageNum || 1;
            }
            let params = {
                appraiseId: this.appraiseId,
                pageSize,
                pageNum
            }
            this.$store.dispatch('initRecordApi', params).then((data) => {
                if (data.success) {
                    if (Array.isArray(data.list) && data.list.length > 0) {
                        let tempArray = [];
                        let tempObj = {};
                        data.list.forEach((value, index) => {
                            tempObj = {
                                userId: value.userId,
                                name: value.userName,
                                image: value.photoUrl,
                                description: that.appraiseChangeTime(value.gmtCreated),
                                rightText: parseInt(value.fillerValue * 100) / 100,
                                pageObj: {},
                            }
                            tempArray.push(tempObj);
                        })
                        let tempRecord = {
                            title: '估价记录',//标题
                            id: 0,//id
                            rightText: `已参与人数:${data.object || 0}`,
                            totalPerson: data.object || 0,
                            totalPages: data.totalPages,
                            curPage: data.curPage,
                            showLength: 3,
                            list: tempArray || [],
                        };
                        /*获取页面信息*/
                        if ((obj && !obj.loadMore) || (!obj)) {
                            this.record = Object.assign({}, this.record, tempRecord);
                            let tempObj = {
                                showLength: 10,
                                isScorll: true,
                            };
                            this.reordAlert = Object.assign({}, this.record, this.reordAlert, tempObj)
                        } else {
                            /*加载更多*/
                            if (obj && obj.loadMore) {
                                /*合并两个数组*/
                                let tempAddList = this.reordAlert.list;
                                tempAddList.push(...tempArray);
                                let tempRecordAlert = {
                                    totalPages: data.totalPages,
                                    curPage: obj.pageNum,
                                    showLength: obj.pageNum * 10,
                                    list: tempAddList || [],
                                };
                                this.reordAlert = Object.assign({}, this.reordAlert, tempRecordAlert);
                            }
                        }
                    }
                } else if (data.errMsg) {
                    this.$root.$emit('toast', { msg: data.errMsg });
                } else {
                    this.$root.$emit('toast', { msg: '获取估价记录失败' });
                }
            })
        },
        /*自己的估价记录*/
        initSelfRecord (obj) {
            let that = this;
            let nowTime = Date.parse(new Date());
            let querys = {
                pageSize: 100,
                pageNum: 1,
            }
            if (obj && obj.loadMore) {
                let tempObj = {
                    pageSize: obj.pageSize || 10,
                    pageNum: obj.pageNum || 1,
                }
            }
            let params = {
                userId: this.userId,
                appraiseId: this.appraiseId,
            }
            this.$store.dispatch('InteractApi', params).then((data) => {
                if (data.success) {
                    if (Array.isArray(data.list) && data.list.length > 0) {
                        let tempArray = [];
                        let tempObj = {};
                        data.list.forEach((value, index) => {
                            tempObj = {
                                userId: value.userId,
                                name: value.userName,
                                image: value.photoUrl,
                                description: that.appraiseChangeTime(value.gmtCreated),
                                rightText: value.fillerValue,
                            }
                            tempArray.push(tempObj);
                            // data.list[index] = value
                        })
                        let tempRecord = {
                            list: tempArray || [],
                            showLength: 3,
                            isMarkSelf: false,
                            title: '我的估价',
                            id: 1,//id
                            totalPages: data.totalPages,
                            curPage: data.curPage,
                        };
                        /*获取页面信息*/
                        if ((obj && !obj.loadMore) || (!obj)) {
                            this.selfRecord = Object.assign({}, this.selfRecord, tempRecord);
                            let tempObj = {
                                showLength: 100,
                                isScorll: true,
                            };
                            this.selfReordAlert = Object.assign({}, this.selfRecord, tempObj)
                        } else if (obj && obj.loadMore) {
                            /*TODO 这里的分页失败*/
                            /*加载更多*/
                            /*合并两个数组*/
                            let tempAddList = this.reordAlert.list;
                            tempAddList.push(...tempArray);
                            let tempRecordAlert = {
                                isScorll: true,
                                totalPages: data.totalPages,
                                curPage: obj.pageNum,
                                showLength: obj.pageNum * 10,
                                list: tempAddList || [],
                            };
                            this.selfReordAlert = Object.assign({}, this.selfReordAlert, tempRecordAlert);
                        }
                    }
                } else if (data.errMsg) {
                    this.$root.$emit('toast', { msg: data.errMsg });
                } else {
                    this.$root.$emit('toast', { msg: '获取估价记录失败' });
                }
            })

        },
        appraiseChangeTime (time, obj) {
            let newDate = new Date();
            let nowDate = Date.parse(newDate);
            let isJustNow = 1 * 60 * 1000;//多少分钟之内显示刚刚
            let OneHour = 60 * 60 * 1000;//一小时之内
            let pastTime = new Date(time)

            let nowDay = newDate.getDate();
            let nowMonth = newDate.getMonth() + 1;
            let nowYear = newDate.getFullYear();
            let pastDay = pastTime.getDate();
            let pastMonth = pastTime.getMonth() + 1;
            let pastYear = pastTime.getFullYear();

            let oneDay = 24 * 60 * 60 * 1000;//一天之内
            let oneMonth = 30 * 24 * 60 * 60 * 1000;//一月之内
            let returnTime = '';
            if (nowYear == pastYear) {
                /*是否为今天*/
                if (nowDay == pastDay) {
                    if (nowDate <= isJustNow + time) {
                        returnTime = '刚刚';
                    } else if (nowDate - time <= OneHour) {
                        returnTime = parseInt((nowDate - time) / (60 * 1000)) + '分钟前'//分钟
                    } else if (nowDate - time > OneHour) {
                        returnTime = "今天 " + this.getTime(time).slice(-8, -3);
                    }
                    /*昨天*/
                } else if (nowDay == pastDay + 1) {
                    returnTime = "昨天 " + this.getTime(time).slice(-8, -3);
                    /*前天*/
                } else if (nowDay == pastDay + 2) {
                    returnTime = "前天 " + this.getTime(time).slice(-8, -3);
                } else {
                    returnTime = this.getTime(time, 'yy.MM.dd hh:mm').slice(5)//显示日期
                    /*大于前天*/
                }
            } else {
                returnTime = this.getTime(time, 'yy.MM.dd hh:mm')//显示日期
            }
            return returnTime;
        },
        /*参与估价*/
        joinAppraise (appraiseValue) {
            console.log(appraiseValue, 'appraiseValue');

            /*先判断是否登录，然后再判断是否输入了估价的金额*/
            let that = this;
            if (!this.userId) {
                this.phoneVerify = true;
                // this.$router.push({path:'/to/login'});
                return
            }
            if (appraiseValue != 0 && (!appraiseValue)) {
                this.$root.$emit('toast', { msg: '请输入平均价' });
                return
            }
            /*不为数字*/
            let regVal = /^[0-9\.]+$/ig;
            if (!regVal.test(appraiseValue)) {
                this.$root.$emit('toast', { msg: '价格只能为数字' });
                return
            }
            let params = {
                fillerValue: appraiseValue,
                actKey: this.appraiseId,
            }
            this.$store.dispatch('doAppraiseApi', params).then((data) => {
                if (data.success) {
                    this.appraise.limitJoin = true;
                    if (this.systemStyle == 5) {
                        this.$refs.inputAppraise.appraiseValue = null;
                        let tempObj = {
                            show: true,
                            averageValue: data.result.averageValue,
                            appraiseValue: appraiseValue,
                            validNum: data.result.validNum,
                            actLimitJoin: data.result.actLimitJoin,
                        }
                        if (this.isIphone && this.systemStyle == 5) {
                            window.webkit.messageHandlers.h5EvaluateSuccess.postMessage(JSON.stringify(tempObj));
                        } else if (this.isAndroid && this.systemStyle == 5) {
                            window.htmlInteracAndroid.gujiaSuccess(that.carrierId);
                        }
                        this.successAlert = Object.assign({}, this.successAlert, tempObj);
                    } else {
                        this.$router.push({ path: '/act/finish' })
                    }
                } else if (data.errMsg) {
                    this.$root.$emit('toast', { msg: data.errMsg });
                } else {
                    this.$root.$emit('toast', { msg: '估价失败' });
                }
            })
        },
        /*获取微信分享信息*/
        getShareBody () {
            let that = this;
            let storeId = this.appraise.storeId;
            let interactType = 5;
            let querys = {
                userId: this.userId,
                interactId: this.appraiseId,
                interactType: interactType,
                storeId: storeId
            }
            this.$store.dispatch('getShareBodyApi', { querys, storeId }).then((data) => {
                if (data.success) {
                    this.shareBody = Object.assign({}, this.shareBody, data.result.shareBodyInfos[0])
                } else if (data.errMsg) {
                    this.$root.$emit('toast', { msg: data.errMsg });
                } else {
                    this.$root.$emit('toast', { msg: '获取分享信息失败' });
                }
            })
        },
        /*活动预约通知*/
        actAppointmentInform () {
            if (this.isWarn) {
                return
            }
            let successToast = '<span style="font-size:.14rem;display:inline-block;padding-bottom: .05rem;">设置提醒成功！</span><br /><span style="font-size:.12rem">活动开始前5分钟将会提醒您</span>';
            /*如果已经预约成功了，就不要让用户再次调取预约接口了*/
            if (this.informSuccess) {
                this.$root.$emit('toast', { msg: successToast });
                return
            }
            let params = {
                userId: this.userId,
                actType: 5,
                actKey: this.appraiseId,
                carrierId: this.carrierId,
            }
            this.$store.dispatch('actAppointmentInformApi', params).then((data) => {
                if (data.success) {
                    this.informSuccess = true;
                    this.$root.$emit('toast', { msg: successToast });
                    this.isWarn = true;
                } else if (data.errMsg) {
                    this.$root.$emit('toast', { msg: data.errMsg });
                } else {
                    this.$root.$emit('toast', { msg: '获取订单信息失败' });
                }
            })
        },
        tabSelect (selectIndex) {
            this.selectedRecordWay = selectIndex;
            if (selectIndex == 0) {
                this.initRecord();
            } else if (selectIndex == 1) {
                this.initSelfRecord();
            }
        },
        showBigSiper (imgInfo) {
            let that = this;
            let tempObj = [];
            if (imgInfo.mediaType == 1) {
                that.appraise.rewardRuleModel.answerRewardModels.forEach((answerValue, index) => {
                    if (answerValue.mediaContents && answerValue.mediaContents.length > 0 && imgInfo.index == index) {
                        answerValue.mediaContents.forEach((value, index) => {
                            tempObj.push(value.url);
                        });
                        this.bigSwiperList = tempObj;
                        that.swiperShow = true;
                        document.body.className = 'ovfHiden';
                        document.documentElement.className = 'ovfHiden';
                    }
                });
                console.log(that.swiperShow, 'that.swiperShow');

            }
        },
        hideBigSiper () {
            this.swiperShow = false;
            document.body.className = '';
            document.documentElement.className = '';
        },
        /*查看更多*/
        showMoreJoin (index, obj) {
            this.$store.state.loadMore = true;
            let tempObj = {
                showLength: 10,
                isScorll: true,
            };
            if (index == 0) {
                //总的参与记录
                this.reordAlert = Object.assign({}, this.record, this.reordAlert, tempObj)
                this.appraiseRecordAlertBox = true;
            } else if (index == 1) {
                /*自己的参与记录*/
                this.selfRecordAlert = Object.assign({}, this.selfRecord, this.selfRecordAlert, tempObj);
                this.appraiseRecordAlertSelf = true;
            }
        },
        loadingMore (obj) {
            /*总的参与记录，更多*/
            if (obj.id == 0) {
                let tempContentObj = {};
                if (obj.loadMore) {
                    tempContentObj = {
                        loadMore: true,
                        totalPages: this.reordAlert.totalPages,
                        pageNum: ++this.reordAlert.curPage,
                    };
                    if (this.reordAlert.curPage <= this.reordAlert.totalPages) {
                        this.initRecord(tempContentObj)
                    }
                } else {
                    this.reordAlert.curPage = 1;
                    tempContentObj = {
                        loadMore: false,
                        totalPages: this.reordAlert.totalPages,
                        pageNum: 1,
                    };
                    this.initRecord(tempContentObj)
                }
                /*自己的参与记录,更多*/
            } else if (obj.id == 1) {
                let tempContentObj = {};
                if (obj.loadMore) {
                    tempContentObj = {
                        loadMore: true,
                        totalPages: this.selfRecordAlert.totalPages,
                        pageNum: ++this.selfRecordAlert.curPage,
                    };
                    if (this.selfRecordAlert.curPage <= this.selfRecordAlert.totalPages) {
                        this.initSelfRecord(tempContentObj)
                    }
                } else {
                    this.selfRecordAlert.curPage = 1;
                    tempContentObj = {
                        loadMore: false,
                        totalPages: this.selfRecordAlert.totalPages,
                        pageNum: 1,
                    };
                    this.initSelfRecord(tempContentObj)
                }
            }
        },
        // appraiseBoxHidden(){
        //     console.log('1')
        // },
        /*关闭估价详情弹框*/
        clickBord () {
            this.appraiseShow = false;
        },
        /*显示估价的详情弹框*/
        appraiseShowFn () {
            this.appraiseShow = true;
            setTimeout(() => {
                if (this.$refs.appraiseBox) {
                    this.$refs.appraiseBox.showSlideBottom();
                }
            }, 50)
        },
        /*提交手机号码*/
        submitPhone (obj) {
            let that = this;
            /*提交手机号码*/
            let url = `${this.NW_API_API_LOCALE_VERSION}/user/account/code/login`;
            let paramas = {
                "phone": obj.phone,
                "authCode": obj.code,
                /*TODO 有第三方id就需要传入*/
                // "thirdId":that.hasThirdId,                 //----微信授权登录绑定手机号码时才传 !!    ++20190805++
                "deviceType": "H5",
                "deviceId": xtoken.getDeviceId(),
            }
            this.xurl.postDataJsonLoading(url, paramas).then((data) => {
                if (data.success) {
                    //TODO 这里逻辑有问题 这里更新用户信息，然后刷新页面
                    this.$store.dispatch('updateCurrentUser', data.result).then(() => {
                        that.$router.push({ path: '/act/finish' })
                    });
                } else if (data.errMsg) {
                    this.$root.$emit('toast', { msg: data.errMsg });
                } else {
                    this.$root.$emit("toast", { msg: "登录失败，请重新登录" });
                }
            })
        },
        showHistoryRecord () {
            this.showHistoryRecordAlert = true;
        },
        loadingHistoryRecordMore () {
            this.showHistoryRecordAlert = true;
        },
        /*领奖按钮的各种方法*/
        getPrizeBtn () {
            /*活动已结束，已经中奖，可以领奖*/
            if (!this.appraise.received) {
                this.initCode();
            } else {
                this.$root.$emit("toast", { msg: "您已领取奖品" });
            }
        },
        /*通知*/
        informBtn () {

        },
        /*时间到了*/
        endTime () {
            this.initAppraise();
            // window.location.reload();
        },
        /*跳到用户中心*/
        toUserCenter (obj) {
            this.$router.push({ path: '/to/user/info', query: { visitId: obj.userId, self: obj.userId == this.userId } });
        },
        /*回到顶部*/
        appraiseToTop () {
            // let dom = document.getElementsByClassName('slide-bottom-transition')[0];
            let dom = document.getElementsByClassName('appraise-box')[0];
            let tempObj = {
                dom: dom
            };
            this.toTop(tempObj)
        },
        /*分享*/
        shareFn () {
            if (this.systemStyle == 6 || !this.systemStyle) {
                this.showShare = true
            } else if (this.systemStyle == 5) {
                let tempObj = {
                    storeId: this.appraise.storeId,
                    actId: this.appraiseId
                }
                if (this.isAndroid && window.htmlInteracAndroid) {
                    window.htmlInteracAndroid.toShare(JSON.stringify(tempObj))
                } else if (this.isIphone && window.webkit) {
                    window.webkit.messageHandlers.toShare.postMessage(JSON.stringify(tempObj));
                }
            }
        },
        /*导航接口*/
        navagation () {
            let navagationObj = {
                latitude: this.storeInfo.latitude,   //经度
                longitude: this.storeInfo.longitude,    //纬度
                storeName: this.storeInfo.location,   //店铺名称
            }
            if (this.systemStyle == 5) {
                if (this.isAndroid && window.htmlInteracAndroid) {
                    window.htmlInteracAndroid.goToNavigation(JSON.stringify(navagationObj));
                } else if (this.isIphone && window.webkit) {
                    window.webkit.messageHandlers.h5GotoMapNav.postMessage(JSON.stringify(navagationObj));
                }
            }
        },
        /*下次通知我*/
        nextInform () {
            if (!this.isWarn) {
                this.$root.$emit('toast', { msg: '设置成功，下次活动会通知您的哦`' });
            }
        },
        /*客户端调用刷新页面的接口*/
        refreshAppraiseTime (obj) {
            // let validNum = obj && (obj.validNum > 0) ? obj.validNum : 1;
            // this.inputAppraise = Object.assign({},{time:validNum});
            // console.log('enterRefreshAppraiseTime');
            // if(validNum > 0){
            //     this.appraise.limitJoin = false;
            // }else{
            //     this.appraise.limitJoin = true;
            // }
            // this.appraise = Object.assign({},this.appraise);
        }
    },
    watch: {
        appraiseShow (val) {
            console.log(val);
        }
    },
    components: {
        'swiper-center-big': SwiperCenterBig,
        'full-height-swiper': () => import('../../../components/commonComponents/swiperComponent/FullHeightSwiper.vue'),
        'line-chart': () => import('../../../components/commonComponents/highCharts/LineChart'),
        'user-list': () => import('../../../components/commonComponents/usersList/UserList'),
        'day-hmsm': () => import('../../../components/commonComponents/timer/DayHMSM'),
        'input-appraise': () => import('./components/InputAppraise'),
        'prize-record': () => import('./components/PrizeRecord'),
        'prize-record-alert': () => import('./components/PrizeRecordAlert'),
        'success-alert': () => import('./components/SuccessAlert'),
        'appraise-record-alert': () => import('./components/AppraiseRecordAlert'),
        'act-rule': () => import('../../../components/commonComponents/rule/RuleModule1.vue'),
        'full-height-video': () => import('../../../components/commonActModel/video/FullHeightVideo.vue'),
        "video-swiper-panorama": () => import("../../../components/commonActModel/videoSwiperPanorama/VideoSwiperPanorama"),
        'slide-bottom': () => import('../../../components/commonComponents/slideBottom/SlideBottom'),
        'login-verify': () => import('../../../components/commonActModel/loginVerify/LoginVerifyCircle'),
        "v-share": () => import("../../../components/commonComponents/share/Share"),
        'static-img-alert': () => import('../../../components/commonComponents/alert/staticImgAlert'),
        // 'wx-share-body': () => import('../../../components/wx/WxShareBody'),
    },
}
</script>

<style scoped lang="scss">
.appraise /deep/ {
    .circle-rule-position {
        z-index: 1061;
    }
    .slide-bottom-transition {
        background-color: #999999;
    }
    .line-chart {
        padding-bottom: 0.12rem;
    }

    .sure-start-prize {
        width: 3rem;
        padding: 0.16rem;
        min-height: 3.85rem;
        h1 {
            font-size: 0.16rem;
        }
        h2 {
            font-size: 0.14rem;
        }
        .rule-title {
            padding-bottom: 0;
        }
    }

    .rpfr-close-btn {
        width: 0.31rem;
        height: 0.31rem;
        bottom: -0.5rem;
    }

    .rule-title {
        border-bottom: 0;
    }

    /*.slide-bottom-transition {*/
    /*border-top-left-radius: .1rem;*/
    /*border-top-right-radius: .1rem;*/
    /*}*/

    .video-default-poster {
        background-image: none;
    }

    .login-verify-v1 {
        z-index: 1061;
        padding: 0.38rem 0.2rem 1.2rem;
    }

    .verify-v1-title {
        margin-bottom: 0.39rem;
    }

    .apply-use {
        bottom: 0.27rem;
    }

    .apply-use-btn {
        background-color: #fdd909;
        border-radius: 0.25rem;
    }

    .winput-name {
        background-color: #e6e9f0;
        -webkit-border-radius: 0.25rem;
        -moz-border-radius: 0.25rem;
        border-radius: 0.25rem;
    }

    .bottom-close-btn {
        width: 0.31rem;
        height: 0.31rem;
    }
    .self-swiper-pagination {
        width: 0.6rem;
        text-align: center;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0.2rem;
        margin: auto;
    }
    .circle-rule-position {
        position: absolute;
    }
    .com_black {
        width: 3.75rem;
        width: 100vw;
        height: 6.67rem;
        height: 100vh;
        position: absolute;
        right: auto;
        top: auto;
        margin: auto;
    }
    .module-bord-position {
        position: absolute;
    }
}
.is-h5 /deep/ {
    .btns-wrap {
        position: absolute !important;
    }
    .circle-rule .sure-start-prize {
        left: 1.875rem;
        left: 50vw;
        top: -3.33;
        top: -50vh;
    }
    .appraise-record-alert-box {
        .module-bord-position {
            /*left: 1.875rem;*/
            /*left: 50vw;*/
        }
    }
    .appraise-rule {
        .module-bord-content {
            top: -3.335rem;
            top: -50vh;
        }
        .circle-rule {
            position: absolute;
            z-index: 1062;
        }
    }
    .appraise-record-alert {
        .module-bord /deep/ {
            .com_black {
                z-index: 1062;
            }
        }
        .module-bord-position {
            z-index: 1063;
            // left: 1.875rem;
            // left: 50vw;
        }
    }
}
.is-h5 {
    .full-height-swiper-wrap /deep/ {
        position: relative !important;
        z-index: 1062 !important;
        .content {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1062;
            .iconfont {
                top: 0;
                left: 0;
            }
            .swiper-container {
                height: 80vh;
                .swiper-slide {
                    text-align: center;
                    .swiper-item-img {
                        height: 100%;
                        width: 100%;
                        object-fit: contain;
                    }
                }
            }
        }
    }
    .appraise-record-all /deep/ {
        .module-bord-content {
            top: -50vh;
        }
    }
    .appraise-prize-record /deep/ {
        .module-bord-content {
            top: -47vh;
            height: auto;
        }
    }
}
.static-img-alert-wrap /deep/ {
    .module-bord-content {
        width: 3.2rem !important;
    }
    .static-code {
        padding: 0.05rem;
        background-color: #f5f5f5;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 8px;
        width: 170px;
        height: 170px;
    }
    .com_black {
        z-index: 1060;
    }
    .module-bord-position {
        z-index: 1061;
    }
}
.appraise-show-height /deep/ {
    .slide-bottom-transition {
        height: 100% !important;
    }
    .appraise-cbox {
        border-radius: 0;
    }
}

.appraise-rule /deep/ .com_black {
    z-index: 1060;
}
.login-verify /deep/ .com_black {
    z-index: 1060;
}
.share-box /deep/ {
    .share-bord-warp {
        z-index: 1062;
    }
    .com_black {
        z-index: 1062;
    }
}
.success-alert-box /deep/ {
    .module-bord-position {
        z-index: 1061;
    }
    .com_black {
        z-index: 1060;
    }
}
.appraise-wbox /deep/ {
    height: 80%;
    width: 100vw;
    .com_black {
        background-color: rgba(0, 0, 0, 0);
    }

    .user-item-description,
    .user-item-right-text {
        color: #fff;
    }

    .description-text {
        color: rgba(255, 255, 255, 0.4);
    }
}

.bottom-input-box /deep/ {
    .time-unit {
        font-size: 0.1rem;
        color: rgba(255, 255, 255, 0.6);
    }

    .time-boxs {
        padding-left: 0;
    }

    .timer {
        padding: 0;
        text-align: center;
    }

    .time-box {
        padding: 0 0.05rem;
    }
}

.swiper-box /deep/ {
    .swiper-center-big {
        width: 2rem;
        height: 2.5rem;
        background-color: transparent;
    }

    .swiper-container {
        overflow: unset;
    }

    .swiper-container {
        height: 2.5rem;
    }

    .swiper-slide {
        border-radius: 0.03rem;
        width: 1.7rem;
        height: 2.2rem;

        .img-wrap {
            overflow: hidden;
            padding: 0.15rem;
            background-color: rgba(0, 0, 0, 0.2);
            border-radius: 0.1rem;
            /*background-color: transparent;*/
            .booking-item-top-img {
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }
    .myVideo {
        max-height: 100%;
    }
}
.appraise-cbox /deep/ {
    .appraise-record {
        background-color: rgba(0, 0, 0, 0.4);
    }
}

.appraise-record {
    width: 3.43rem;
    border-radius: 0.08rem;
    padding: 0.16rem 0.16rem 0.2rem;
    background-color: rgba(0, 0, 0, 0.4);
    margin-bottom: 0.12rem;
}

.appraise-box {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
    overflow: auto;
    -webkit-touch-callout: inherit;
    -webkit-user-select: auto;
    -webkit-overflow-scrolling: touch;
    flex-direction: column-reverse;
}

/*.height-top{
        height: .8rem;
        width: 100%;
        position: relative;
        z-index: 1;
    }*/
.appraise-cbox {
    /*border-top-left-radius: .1rem;*/
    /*border-top-right-radius: .1rem;*/
    background-color: rgba(153, 153, 153, 1);
    /*height: calc(100vh - .8rem);*/
    // width: 3.75rem;
    width: 100vw;
    overflow: auto;
    -webkit-touch-callout: inherit;
    -webkit-user-select: auto;
    position: relative;
}

.appraise-msg {
    padding-top: 0.1rem;
}

.appraise-act-time {
    display: inline-block;
    font-size: 0.11rem;
    color: #fff;
    height: 0.28rem;
    position: relative;
    left: 50%;
    top: 0.37rem;
    padding: 0.05rem 0.15rem;
    background-color: rgba(0, 0, 0, 0.2);
    transform: translate(-50%, -50%);
    -webkit-border-radius: 0.25rem;
    -moz-border-radius: 0.25rem;
    border-radius: 0.25rem;
}

.appraise-act-rule {
    display: inline-block;
    padding: 0.05rem;
    font-size: 0.11rem;
    width: 0.24rem;
    text-align: center;
    background-color: #f7d86d;
    color: #995900;
    border-top-left-radius: 0.05rem;
    border-bottom-left-radius: 0.05rem;
}

.top-text-wImg {
    padding-top: 0.35rem;
}

.top-text-img {
    height: 0.5rem;
}

.swiper-box {
    overflow: hidden;
    padding-top: 0.46rem;
    padding-bottom: 0.15rem;
}

.discription-img {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    color: #fff;
    margin: auto;
    font-size: 0.15rem;
}

.appraise-check-more {
    display: inline-block;
    padding: 0.05rem 0.1rem;
    color: #ffdc08;
    font-size: 0.14rem;
    border: 1px solid #ffdc08;
    background-color: transparent;
    -webkit-border-radius: 0.25rem;
    -moz-border-radius: 0.25rem;
    border-radius: 0.25rem;
}

.tab-list {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.18rem;
    padding-bottom: 0.3rem;
    .active {
        color: #fff;
    }
}

.join-num {
    font-size: 0.13rem;
}

.select-item {
    padding-right: 0.1rem;
}

.bottom-text {
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}

.bottom-input-box {
    background-color: rgba(0, 0, 0, 0.6);
    padding: 0.12rem 0.28rem;
}

.input-box {
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 0.25rem;
    padding: 0.05rem 0.07rem 0.05rem 0.15rem;
    height: 0.4rem;
    margin-top: 0.1rem;
}

.activity-remind-btn {
    background-image: linear-gradient(to bottom, #ffac0b, #ffd906);
    /*background-color: #FDD909;*/
    color: #fff;
    font-size: 0.16rem;
}
.activity-remind-btn.disabled {
    background-image: linear-gradient(to bottom, #c4c6cc, #c4c6cc);
}

.appraise .full-height-swiper-wrap {
    width: 6.67rem;
    width: 100vw;
    height: 100%;
    background-color: #000;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1060;
}
.appraise .full-height-swiper-wrap /deep/ {
    .swiper-slide {
        height: 100%;
    }
}
.down-app-box {
    background-color: rgba(255, 255, 255, 0.2);
    padding: 0.1rem 0.28rem;
    overflow: hidden;
}

.full-height-wvideo {
    height: 100vh;
}

.appraise-title {
    border-top-left-radius: 0.1rem;
    border-top-right-radius: 0.1rem;
    background-color: rgba(0, 0, 0, 0.4);
    height: 0.5rem;
    line-height: 0.5rem;
    position: absolute;
    bottom: 0;
    left: 0;
    color: #fff;
    z-index: 10;
    padding: 0 0.15rem;
}

.top-line {
    position: absolute;
    top: 0.05rem;
    left: 0;
    right: 0;
    margin: auto;
    display: inline-block;
    height: 0.03rem;
    width: 0.48rem;
    background-color: #fff;
}
.chart-no-data {
    color: rgba(255, 255, 255, 0.4);
    min-height: 1.5rem;
}
.record-box {
    min-height: 1.5rem;
}
.btns-wrap {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1062;
    background-color: rgba(0, 0, 0, 0.4);
    flex: 1;
    -ms-flex: 1;
    -webkit-flex: 1;
}
.appraise-wshare {
    position: fixed;
    right: 0.16rem;
    bottom: 1.36rem;
    z-index: 1060;
    width: 0.32rem;
}
.appraise-share,
.appraise-top {
    display: inline-block;
    width: 0.32rem;
    height: 0.32rem;
    img {
        width: 100%;
    }
}
.appraise-top {
    margin-top: 0.24rem;
}
.height-full {
    height: 100% !important;
}
.current-history {
    padding-top: 0.5rem;
}
</style>
<style>
.toast-content {
    padding: 0.1rem 0.15rem !important;
    border-radius: 0.3rem !important;
}
</style>